<template>
  <u-tabbar :value="tabBarIndex" :placeholder="false" @change="tabBarChange" activeColor="#1577FB"
    inactiveColor="#B1B8B8" fixed :safeAreaInsetBottom="true">
    <template v-for="(item, index) in list">
      <u-tabbar-item :text="item.text" :name="index" :badge="item.text == '消息' ? badgeCount : null">
        <image class="u-page__item__slot-icon" slot="active-icon" :src="item.selectedIconPath"></image>
        <image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.iconPath"></image>
      </u-tabbar-item>
    </template>
  </u-tabbar>
</template>
<script>
  import {
    getUnreadSum
  } from '../../api/api';
  export default {
    props: {
      tabBarIndex: {
        type: Number,
        default: 0,
      },
      badge: {
        type: Number,
        default: 0
      }
    },
    watch: {
      badge(newVal) {
        this.badgeCount = newVal
      }
    },
    mounted() {
      this.init()
    },
    data() {
      return {
        badgeCount: 0,
        list: [{
            pagePath: "/pages/home/home",
            text: "首页",
            iconPath: "../../static/icons/home.png",
            selectedIconPath: "../../static/icons/home-active.png",
          },
          {
            pagePath: "/pages/messages/messages",
            text: "消息",
            iconPath: "../../static/icons/messages.png",
            selectedIconPath: "../../static/icons/messages-active.png",
          },
          {
            pagePath: "/pages/myself/myself",
            text: "我的",
            iconPath: "../../static/icons/personCenter.png",
            selectedIconPath: "../../static/icons/personCenter-active.png",
          },
        ],
      };
    },
    methods: {
      tabBarChange(index) {
        if (index != 1) {
          uni.removeStorageSync("gooverIndex");
          uni.removeStorageSync("goOverBagIndex");
          uni.removeStorageSync("gooverCompanyId");
        }

        if (index != 2) {
          uni.removeStorageSync("messIndex");
        }

        uni.switchTab({
          url: this.list[index].pagePath,
        });
      },
      init() {
        getUnreadSum().then((res) => {
          this.badgeCount = res.result.countSum;
        });
      },
    },
  };
</script>
<style lang="scss">
  .u-page__item__slot-icon {
    width: 40rpx;
    height: 40rpx;
  }
</style>